<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright 2014 Christian Hildebrandt

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">

<body>
	<ui:composition>
		<!-- Left side column. contains the logo and sidebar -->
		<aside class="left-side sidebar-offcanvas"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- Sidebar user panel -->
		<div class="user-panel">
			<div class="pull-left image">
				<h:graphicImage library="img" name="#{loginBean.logggedInUser.avatarImage}" class="img-circle" alt="User Image" />
			</div>
			<div class="pull-left info">
				<p>
					Hallo,
					<h:outputText value="#{loginBean.username}" />
				</p>

				<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
			</div>
		</div>
		<!-- search form --> <!-- 		<form action="#" method="get" class="sidebar-form"> --> <!-- 			<div class="input-group"> --> <!-- 				<input type="text" name="q" class="form-control" placeholder="Search..." /> <span class="input-group-btn"> -->
		<!-- 					<button type='submit' name='search' id='search-btn' class="btn btn-flat"> --> <!-- 						<i class="fa fa-search"></i> --> <!-- 					</button> --> <!-- 				</span> -->
		<!-- 			</div> --> <!-- 		</form> --> <!-- /.search form --> <!-- sidebar menu: : style can be found in sidebar.less -->
		<ul class="sidebar-menu">
			<!-- 			<li class="active"> -->
			<!-- 				<h:link outcome="/pages/dashboard.xhtml"> -->
			<!-- 					<i class="fa fa-dashboard"></i> -->
			<!-- 					<span>Dashboard</span> -->
			<!-- 				</h:link> -->
			<!-- 			</li> -->
			<li>
				<h:link outcome="/pages/Employee/timesheet.xhtml">
					<i class="fa fa-clock-o"></i>
					<span>Zeiterfassung</span>
					<small class="badge pull-right bg-green">new</small>
				</h:link>
			</li>
			<ui:fragment rendered="#{loginBean.logggedInUser.hasRole('ADMIN')}">
				<li class="treeview">
					<h:link fragment="#">
						<i class="fa fa-briefcase" />
						<h:panelGroup id="verwaltung">
							<h:outputText value="Verwaltung" />
						</h:panelGroup>
						<i class="fa fa-angle-left pull-right" />
					</h:link>
					<ul class="treeview-menu">
						<li>
							<h:link outcome="/pages/Admin/users.xhtml">
								<i class="fa fa-user" />
								<h:outputText value="Benutzer" />
							</h:link>
						</li>
						<li>
							<h:link outcome="/pages/Admin/projects.xhtml">
								<i class="fa fa-laptop" />
								<h:outputText value="Projekte" />
							</h:link>
						</li>
					</ul>
				</li>
			</ui:fragment>
			<!-- 			<li><a href="pages/calendar.html"> <i class="fa fa-calendar"></i> <span>Calendar</span> <small class="badge pull-right bg-red">3</small> -->
			<!-- 			</a></li> -->
			<!-- 			<li><a href="pages/mailbox.html"> <i class="fa fa-envelope"></i> <span>Mailbox</span> <small class="badge pull-right bg-yellow">12</small> -->
			<!-- 			</a></li> -->
			<!-- 			<li class="treeview"><a href="#"> <i class="fa fa-folder"></i> <span>Examples</span> <i class="fa fa-angle-left pull-right"></i> -->
			<!-- 			</a> -->
			<!-- 				<ul class="treeview-menu"> -->
			<!-- 					<li><a href="pages/examples/invoice.html"><i class="fa fa-angle-double-right"></i> Invoice</a></li> -->
			<!-- 					<li><a href="pages/examples/login.html"><i class="fa fa-angle-double-right"></i> Login</a></li> -->
			<!-- 					<li><a href="pages/examples/register.html"><i class="fa fa-angle-double-right"></i> Register</a></li> -->
			<!-- 					<li><a href="pages/examples/lockscreen.html"><i class="fa fa-angle-double-right"></i> Lockscreen</a></li> -->
			<!-- 					<li><a href="pages/examples/404.html"><i class="fa fa-angle-double-right"></i> 404 Error</a></li> -->
			<!-- 					<li><a href="pages/examples/500.html"><i class="fa fa-angle-double-right"></i> 500 Error</a></li> -->
			<!-- 					<li><a href="pages/examples/blank.html"><i class="fa fa-angle-double-right"></i> Blank Page</a></li> -->
			<!-- 				</ul></li> -->
		</ul>
		</section> </aside>
	</ui:composition>
</body>
</html>
